/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import PopularItem from '../common/PopularItem';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar, Button,
    TextInput,
    FlatList
} from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import actions from "../action";
import {connect} from "react-redux";

type Props = {};
export default class FetchDemoPage extends Component<Props>{
    constructor(props){
        super(props)
        this.state={
            showText: ''
        }
    }
    loadData(){
        // https://api.github.com/search/repositories?q=${this.searchkey}
        // https://api.github.com/search/repositories?q=java
        // http://192.168.1.222:8075/Weixin/List
        let url =`https://api.github.com/search/repositories?q=java`
        fetch(url)
            .then(response => response.json())
            .then(responseData => {
                console.log(JSON.stringify(responseData));
                this.setState({
                   showText: responseData.score
                });
            })

    }

    render(){
        return (
            <View style={styles.item}>
                <FlatList
                    data={this.state.showText}
                    renderItem={({item}) => <Text style={styles.text}>{item}</Text>}
                />
                {/*<Text style={styles.welcome}>FavoritePage</Text>*/}
                {/*<View style={styles.input_container}>*/}
                {/*    <TextInput*/}
                {/*        style={styles.input}*/}
                {/*        onChangeText={text=>{*/}
                {/*            this.searchkey = text;*/}
                {/*        }}*/}
                {/*    />*/}
                    <Button
                        title="Get Data"
                        onPress = {() => {
                            this.loadData();
                        }}
                    ></Button>


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    input:{
        height: 30,
        flex: 1,
        borderColor: 'black',
        borderWidth:1,
        marginRight: 10
    },
    input_container: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    item: {
        backgroundColor: '#169',
        height: 200,
        marginRight: 15,
        marginLeft: 15,
        marginBottom: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        color: 'white',
        fontSize: 20
    }
});
// const mapStateToProps = state => ({});
// const mapDispatchToProps = dispatch => ({
//     onThemeChange: theme => dispatch(actions.onThemeChange(theme))
// });
//
// export default connect(mapStateToProps,mapDispatchToProps)(FavoritePage);
// export default App;
